import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Breadcrumb, Space,  Rate, Button, Modal, Form, Input,Popconfirm, message,DatePicker,} from 'antd';
import ShopTable from '../../../components/ShopTable'
import ShopSearch from '../../../components/Shopsearch'
import UploadImg from '../../../components/Upload'

const { TextArea } = Input;





const GoodsEvaluat = (props) => {
    const [curInd, setInd] = useState(0)
    const [isModalVisible, setIsModalVisible] = useState(false);//新增评论
    const [replyVisible,setreplyVisible]=useState(false)//回复弹框
    const [curId,setID]=useState(null)//当前回复id
    const [keyword,setKeyword]=useState('')//搜索值
    const [status,setStatus]=useState('')//搜索值
    const [shopimg,setImg]=useState(null)
    const timeList=['全部','今天','昨天','最近7天','最近30天','半年']
    const { evaluatList} = props
    useEffect(() => {
        props.dispatch({
            type: 'get_evaluat'
        })
    }, [])
    const handleTabs=(index,item)=>{//时间导航切换
        console.log(index,item)
        setInd(index)
        props.dispatch({
            type:'get_evaluat',
            payload:{
                createTime:item
            }
        })
    }
    const timeChange=(date, dateString)=> {
        console.log(date, dateString);
        props.dispatch({
            type:'get_evaluat',
            payload:{
                createTime:dateString
            }
        })
      }

    const SearchForm = {  //搜索组件传值
        LevelStatus:{
            title:'选择评价状态：',
            data:[ //级联选择
                {
                    value: '全部',
                    label: '全部',
                },
                {
                    value: '已回复',
                    label: '已回复',
                },
                {
                    value: '未回复',
                    label: '未回复',
                },
            ]
        },
        search: {
            title: '搜索：',
            placeholder: '请输入用户名、商品名称、关键字、id'
        }
    }

    const handleAddEvaluat = () => {  //添加商品评论
        setIsModalVisible(true);
    }
    const AddConfirm=(values)=>{  //添加确定
        console.log('Success:', values);
        console.log(shopimg,'shopinmg')
       props.dispatch({
            type:'add_evaluat',
            payload:{
                ...values,
                shopimg
            }
        })
        setIsModalVisible(false)
    }

    const handleEdmit = (record) => {//回复显示弹框
        console.log(record)
        setID(record.id)
        setreplyVisible(true);
    }
    const replyConfirm = (values) => {//回复确定
        console.log('Success:', values);
       
        props.dispatch({
            type:'edmit_evaluat',
            payload:{
                id:curId,
                reply:values.reply,
                status:'已回复'
            }
        })
        setreplyVisible(false)
      };
    
    const onFinishFailed = (errorInfo) => {  //回复取消
        console.log('Failed:', errorInfo);
        setreplyVisible(false)
    };
    const handleCancel = () => {//关闭弹框
        setIsModalVisible(false);
        setreplyVisible(false);
    };
    const handleSearch = (val) => {//搜索
        // console.log(val,'keyword')
        setKeyword(val)
        props.dispatch({
            type: 'get_evaluat',
            payload: {
                keyword: val,
                status
            }
        })
    }
    const selectStatus = (val) => {//选择
        console.log(val[val.length - 1])
        setStatus(val[val.length - 1])
        props.dispatch({
            type: 'get_evaluat',
            payload: {
                status: val[val.length - 1],
                keyword
            }
        })
    }

    const delConfirm=(record)=> {//确定删除
        const { id } = record;
        console.log(id,'del-id')
        props.dispatch({
            type: 'delete_evaluat',
            payload: id
        })
        props.dispatch({
            type: 'get_evaluat'
        })
      }
      
      const delCancel=(e)=> {//取消删除
        console.log(e);
        message.error('取消删除');
      }
    const handleUrl=(val)=>{//获取图片路径
        console.log(val.response&& val.response.imgUrl)
        setImg(val.response&& val.response.imgUrl)
    }
    const formatDate=(date)=> {
        var date = new Date(date);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
      }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width:50,
            align: 'center',
        },
        {
            title: '商品信息',
            dataIndex: 'formatName',
            key: 'formatName',
            width:180,
            align: 'center',
            render:(text,record)=><div style={{display:'flex',alignItems:'center'}}>
            <img src={record.shopimg} alt="" style={{height:'50px',width:'80px'}}/>
            <span style={{width:'80px',textAlign:'left'}}>{record.shopinfo}</span>
            </div>
        },
        {
            title: '用户名称',
            dataIndex: 'buyerId',
            key: 'buyerId',
            align: 'center',
        },
        {
            title: '商品评分',
            dataIndex: 'shopScore',
            key: 'shopScore',
            align: 'center',
        },
        {
            title: '服务评分',
            dataIndex: 'seviceScore',
            key: 'seviceScore',
            align: 'center',
        },
        {
            title: '评价内容',
            dataIndex: 'content',
            key: 'content',
            align: 'center',
        },
        {
            title: '回复内容',
            dataIndex: 'reply',
            key: 'reply',
            align: 'center',
        },
        {
            title: '最近时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            render:(createTime)=><span>{formatDate(createTime*1)}</span>
        },
        {
            title: '操作',
            key: 'opreat',
            align: 'center',
            width:150,
            render: (text, record) => (
                <Space size="middle">
                    <Button type="link" size='small' onClick={() => handleEdmit(text, record)}>回复</Button>
                    <Popconfirm
                        title="确定要删除这项吗?"
                        onConfirm={()=>delConfirm(text, record)}
                        onCancel={delCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="link" size='small' 
                        >删除</Button>
                    </Popconfirm>
                </Space>
            ),
        }
    ];
 
    // console.log(classifyList)
    return (
        <div className={style.goodsManage}>
            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i> 
                        <a href="/layout">主页</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品评价
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.main}>
                <section>
                    <div className={style.time}>
                        <div className={style.timebox}>
                        <span>时间选择：</span>
                        <ul >
                        {
                            timeList.map((item,index)=><li key={index}
                            style={{ background:curInd===index?'#397DEE':'none',color:curInd===index?'#fff':'#000',}}
                            onClick={()=>handleTabs(index,item)}
                            >{item}</li>)
                        }
                        </ul>
                        <Space direction="vertical">
                        <DatePicker onChange={timeChange} size="small" placeholder='请选择日期' />
                        </Space>
                        </div>
                          {/* 添加 */}
                    <Button type="primary" onClick={handleAddEvaluat} size='small' style={{marginLeft:'20px',borderRadius:'10px',fontSize:'12px'}}>新增虚拟评论</Button>
                    </div>
                    {/* 搜索 */}
                    <ShopSearch
                        SearchForm={SearchForm}
                        selectStatus={selectStatus}
                        handleSearch={handleSearch}
                    />
                  
                    <ShopTable curList={evaluatList} columns={columns} />
                </section>
            </div>
            <Modal title='新增评论'
                visible={isModalVisible}
                footer={null}>
                 <Form
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 14 }}
                onFinish={AddConfirm}
                autoComplete="off"
                >
                    <Form.Item
                        label="商品："
                        name="shopimg"
                    >
                         <UploadImg content={handleUrl} />
                    </Form.Item>
                    <Form.Item
                        label="用户名称："
                        name="buyerId"
                        rules={[{ required: true, message: '商品规格不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="评论文字："
                        name="content"
                        rules={[{ required: true, message: '商品属性不能为空' }]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item
                        label="商品评分："
                        name="shopScore"
                        rules={[{ required: true, message: '商品属性不能为空' }]}
                    >
                        <Rate />
                    </Form.Item>
                    <Form.Item
                        label="服务评分："
                        name="seviceScore"
                        rules={[{ required: true, message: '商品属性不能为空' }]}
                    >
                        <Rate />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 17, span: 7 }}>
                        <Button onClick={handleCancel}>
                        取消
                        </Button> 
                        <Button type="primary" htmlType="submit">
                        确认
                        </Button>
                    </Form.Item>
                </Form> 
                
            </Modal>
            <Modal title='回复'
                visible={replyVisible}
                footer={null}
               >
                 <Form
                name="basic"
                autoComplete="off"
                initialValues={{ remember: true }}
                onFinish={replyConfirm}
                onFinishFailed={onFinishFailed}
                >
                    <Form.Item name="reply">
                         <TextArea rows={4} />
                    </Form.Item>
                
                    <Form.Item wrapperCol={{ offset: 17, span: 7 }}>
                        <Button onClick={handleCancel}>
                        取消
                        </Button> 
                        <Button type="primary" htmlType="submit">
                        确认
                        </Button>
                    </Form.Item>
                </Form> 
            </Modal>
            
        </div>
    );
}

export default connect((state) => {
    return {
         evaluatList: state. evaluatList,
    }
})(GoodsEvaluat);
